<template>
  <div class="search-container">
    <a-form
      :model="formData"
      :rules="rules"
      ref="formRef"
      layout="inline"
      @submit="handleSearch"
    >
      <a-form-item field="userid" label="账号">
        <a-input v-model="formData.userid" placeholder="账号" />
      </a-form-item>
      <a-form-item field="id" label="宠物名称">
        <a-select v-model="formData.id" allow-clear allow-search>
          <a-option v-for="item in pets" :key="item.value" :value="item.value">
            {{ item.label }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="dv" label="个体">
        <a-input v-model="formData.dv" placeholder="个体" />
      </a-form-item>
      <a-form-item field="level" label="等级">
        <a-input v-model="formData.level" placeholder="等级" />
      </a-form-item>
      <a-form-item field="nature" label="性格">
        <a-select v-model="formData.nature" allow-clear allow-search>
          <a-option
            v-for="item in natureOptions"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="effect" label="特性">
        <a-select v-model="formData.effect" allow-clear allow-search>
          <a-option
            v-for="item in effectOptions"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="shiny" label="异色">
        <a-select v-model="formData.shiny" allow-clear>
          <a-option
            v-for="item in isShinyOptions"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button html-type="submit" type="primary" :loading="searchLoading">
          搜索
        </a-button>
      </a-form-item>
    </a-form>
    <div class="search-table mt20">
      <a-table
        :columns="columns"
        :data="tabelList"
        :pagination="false"
        v-bind="tableConfig"
        size="medium"
      >
        <template #created_at="{ record }">
          {{ formatDate(record.created_at) }}
        </template>
        <template #updated_at="{ record }">
          {{ formatDate(record.updated_at) }}
        </template>
        <template #nature="{ record }">
          {{ findByValue(natureOptions, record.nature) }}
        </template>
        <template #effect="{ record }">
          {{ findByValue(effectOptions, record.effect) }}
        </template>
        <template #shiny="{ record }">
          {{ findByValue(isShinyOptions, record.shiny) }}
        </template>
        <template #petName="{ record }">
          {{ record.id }}
          <a-tag color="arcoblue">
            {{ findByValue(pets, record.id) }}
          </a-tag>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import pets from '@/assets/pets.json'
import { computed, ref, useTemplateRef } from 'vue'
import {
  effectOptions,
  natureOptions,
  isShinyOptions,
  findByValue,
} from './config/dicts'
import { getColumns } from './config/petConfig'
import { getPetInfo } from '@/api/search'
import to from '@/utils/to'
import { formatDate } from '@/utils/dayUtils'

const { height } = defineProps<{
  height: number
}>()
const formData = ref<IPetParams>({
  userid: '',
  id: '',
  dv: '',
  level: '',
  shiny: '',
})
const rules = {
  // id: [{ required: true, message: '请输入宠物id' }],
}
const formRef = useTemplateRef('formRef')
const tableConfig = computed(() => {
  return {
    scroll: {
      x: 1470,
    },
    virtualListProps: {
      height: height,
    },
  }
})
const columns = ref(getColumns())
const tabelList = ref<any[]>([])

const searchLoading = ref(false)
const handleSearch = async () => {
  const errors = await formRef.value.validate()
  if (errors) return
  searchLoading.value = true
  const [res] = await to(getPetInfo(formData.value))
  if (res) {
    const data = res.data.map((item: any) => {
      if (item.effect_list && item.effect_list !== 'null') {
        const effect = JSON.parse(item.effect_list)
        console.log(effect)
        return {
          ...item,
          effect: effect[0].Idx,
        }
      }
      return {
        ...item,
      }
    })
    tabelList.value = data
  }
  searchLoading.value = false
}
</script>

<style scoped lang="scss">
.search-container {
  padding: 20px;
}
</style>
